<template>
    <section>
        <header>
            <div class="tu">
                <img src="https://img1.baidu.com/it/u=2384462888,126311339&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=749" alt="">
            </div>
            <div>
                <div class="name">用户名</div>
                <div class="phone">手机号</div>
            </div>
            <button>账户设置</button>
        </header>
        <main>
            吃货卡
        </main>
        <footer>
            <div>红包到期？</div>
            <div>余额？元</div>
        </footer>
    </section>
</template>

<script setup>

</script>

<style scoped>
    section header{
        display: flex;
        width: 100%;
        height: 100px;
        align-items: center;
        margin: 10px;
    }
    section header .tu{
        width: 60px;
        height: 60px;
    }
    section header .tu img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    section header>:nth-child(2){
        margin-left: 20px;
    }
    section header button{
        margin-left: 180px;
        height: 30px;
    }
    section main{
        width: 90%;
        background-color: blue;
        border-radius: 10px;
        padding: 10px;
        margin: 10px;
    }
    section footer{
        height: 70px;
        width: 90%;
        background-color: red;
        border-radius: 10px;
        padding: 10px;
        margin: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
</style>